<template>
    <div>
        <!--搜索  -->
        <searchs :setDialogVisible="setDialogVisible" />
        <!-- 用户列表 -->
        <users :setDialoglook="setDialoglook"/>
        <!-- 弹出层--新增合同 -->
        <el-dialog v-model="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false" title="新增合同"
            center top="0vh" width="48%">
            <el-divider />
            <!-- 客户信息 -->
            <h3>客户信息</h3>
            <div class="news">

                <el-form :inline="true" ref="newcontractdateref" :model="newcontractdate" class="demo-form-inline" label-width="100px"
                    size="small" label-position="right" :rules="rules">
                    <el-form-item label="合同编号" prop="id" required>

                        <el-input v-model="newcontractdate.id" style="width: 190px" placeholder="请输入合同编号" />

                    </el-form-item>
                    <el-form-item label="合同名称" required prop="name">
                        <el-input v-model="newcontractdate.name" style="width: 190px" placeholder="请输入合同名称" />
                    </el-form-item>

                    <el-form-item label="客户名称" required prop="address">
                        <el-select v-model="newcontractdate.address" placeholder="请选择客户">
                            <el-option label="深圳研发科技有限公司" value="深圳研发科技有限公司" />
                            <el-option label="深圳研发科技有限公司" value="深圳研发科技有限公司" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="合同状态" required prop="ctstate">
                        <el-select v-model="newcontractdate.ctstate" placeholder="请选择合同状态">
                            <el-option label="已通过" value="已通过" />
                            <el-option label="待审批" value="待审批" />
                            <el-option label="已驳回" value="已驳回" />
                            <el-option label="已失效" value="已失效" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="合同类型" required prop="type">
                        <el-select v-model="newcontractdate.type" placeholder="请选择合同类型">
                            <el-option label="XX销售合同" value="XX销售合同" />
                            <el-option label="YY销售合同" value="YY销售合同" />

                        </el-select>
                    </el-form-item>
                    <el-form-item label="关联产品" required prop="linkdoos">
                        <el-select v-model="newcontractdate.linkdoos" placeholder="请选择产品">
                            <el-option label="CRM-1号" value="CRM-1号" />
                            <el-option label="CRM-2号" value="CRM-2号" />

                        </el-select>
                    </el-form-item>

                    <el-form-item label="合同金额" required prop="money">
                        <el-input v-model="newcontractdate.money" style="width: 190px" placeholder="请输入合同金额" />
                    </el-form-item>
                    <!-- 上传 -->
                    <!-- <el-form-item>
              <el-button type="primary" @click="onSubmit">Query</el-button>
            </el-form-item> -->
                    <el-form-item label="合同文件" required>
                        <el-upload v-model:file-list="fileList" class="upload-demo"
                            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple
                            :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove"
                            :limit="3" :on-exceed="handleExceed">
                            <el-button type="primary">上传</el-button>

                        </el-upload>
                    </el-form-item>
                </el-form>
            </div>
            <el-divider />
            <h3>付款信息</h3>
            <!-- 付款信息 -->
            <div class="moneynews">
                <el-form :inline="true" ref="setnews"  :model="newcontractdate" class="demo-form-inline" label-width="100px"
                    size="small" label-position="right">



                    <el-form-item label="签订人" required prop="write">
                        <el-select v-model="newcontractdate.write" placeholder="请选择签订人">
                            <el-option label="张三" value="张三" />
                            <el-option label="李四" value="李四" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="付款方式" required prop="paymoneymethod">
                        <el-select v-model=" newcontractdate.paymoneymethod" placeholder="请选择付款方式">
                        <el-option label="银行卡" value="银行卡" />
                        <el-option label="支付宝" value="支付宝" />
                        <el-option label="微信" value="微信" />
                        </el-select>
                    </el-form-item>


                    <el-form-item label="签订时间" required prop="setdate">
                        <el-date-picker v-model="newcontractdate.setdate" style="width: 190px" type="date" placeholder="请选择签订时间"
                            />
                    </el-form-item>

                    <el-form-item label="预付款" prop="paymoney">
                        <el-input v-model="newcontractdate.paymoney" style="width: 190px" placeholder="请输入预付款" />
                    </el-form-item>

                    <el-form-item label="到期时间" required prop="enddate">
                        <el-date-picker v-model="newcontractdate.enddate" style="width: 190px" type="date" placeholder="请选择到期时间"
                           />
                    </el-form-item>

                    <el-form-item label="备注" prop="eg">
                        <el-input v-model="newcontractdate.eg" style="width: 190px" placeholder="请输入备注" />
                    </el-form-item>


                </el-form>
            </div>
            <el-divider />
            <!-- 汇款信息 -->
            <h3>回款计划</h3>
            <div class="backmoney">

                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="date" label="期数" width="60" />
                    <el-table-column prop="plandate" label="计划回款时间" width="150" />
                    <el-table-column prop="backmoneymethod" label="回款方式" />
                    <el-table-column prop="backmoney" label="回款金额" />
                    <el-table-column prop="backmoneybilv" label="回款比例" />
                    <el-table-column prop="egdate" label="提醒时间" />
                </el-table>
            </div>
            <!-- 保存按钮 -->
            <div class="buttons">
                <el-row class="mb-4">

                    <el-button type="primary" @click="onSubmit" >保存</el-button>

                    <el-button type="info" @click="onReset">重置</el-button>

                </el-row>
            </div>
        </el-dialog>

        <!-- 弹出层--查看 -->
        <el-dialog v-model="dialoglook" :close-on-click-modal="false" :close-on-press-escape="false" title="查看合同"
            center top="0vh" width="48%" class="dialog-look">
          
                <div class="nav">
                    <span class="dian1" @click="setshow1" ref="setborder1">合同信息</span><span class="dian2" @click="setshow2" ref="setborder2">回款信息</span>
                </div>
                <div class="text">
                    <div v-show="control1" class="ctnew">
                        <h3>客户信息</h3>
                        <div class="spans">
                            <span>合同编号:{{}}</span> <span>合同状态:{{}}</span><br>
                            <span>合同名称:{{}}</span> <span>合同类型:{{}}</span><br>
                            <span>客户名称:{{}}</span> <span>合同文件:{{}}</span><br>
                            <span>客户金额:{{}}</span> <span>关联产品:{{}}</span><br>
                        </div>
                        <h3>付款信息</h3>
                        <div class="spans">
                            <span>签订人:{{}}</span> <span>付款方式:{{}}</span><br>
                            <span>签订时间:{{}}</span> <span>预付款:{{}}</span><br>
                            <span>到期时间:{{}}</span> <span>备注:{{}}</span><br>
                        </div>
                       

                    </div>
                    <div v-show="control2" class="ctmoney">
                        <h3>回款计划</h3>
                        <div class="spans">
                          
                                <el-table :data="tableDatas" style="width: 100%">
                                  <el-table-column prop="day" label="期数" width="80" />
                                  <el-table-column prop="date" label="计划回款时间" width="150" />
                                  <el-table-column prop="backmoneymethod" label="回款方式" width="80" />
                                  <el-table-column prop="backmoney" label="回款金额" width="80" />
                                  <el-table-column prop="partent" label="回款比例" width="80" />
                                  <el-table-column prop="tipday" label="提醒时间" width="80" />
                                </el-table>
                              
                            
                        </div>
                      
                       

                    </div>
                </div>
            
           
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    import searchs from '@/views/Contract/All/ui/search.vue'
    import users from '@/views/Contract/All/ui/users.vue'
    import {userAddApi}from '@/services/login.ts'
    import {successMessage}from '@/utils/Tools/successMessage.ts'
    import {errorMessage}from '@/utils/Tools/errorMessage.ts'

    const setborder1 = ref < FormInstance > ()
    const setborder2 = ref < FormInstance > ()

    import { useDialogVisible } from './hooks'
    const [dialogVisible, setDialogVisible] = useDialogVisible()
    const [dialoglook, setDialoglook] = useDialogVisible()
    // const dialogVisible=ref(true)
    // const dialoglook=ref(true)

    import { reactive } from 'vue'
  import { FormInstance } from 'element-plus'
  //获得表单实例
  const newcontractdateref = ref < FormInstance > ()
  const setnews = ref < FormInstance > ()

    //新增合同数据
    const newcontractdate = reactive({
        id: '',
        name: '',
        address: '',
        ctstate: '',
        type: '',
        linkgoos: '',
        money: '',
        write: '',
        paymoneymethod: '',
        setdate: '',
        paymoney: '',
        enddate: '',
        eg: '',
        
    })

    // 表单验证
const rules = reactive<FormRules<UserModule.IUserAddForm>>({
  id: [{ required: true, whitespace: true, message: '合同编号不能为空', trigger: 'blur' }],
  name: [
    { required: true, whitespace: true, message: '合同名称不能为空', trigger: 'blur' },
    // { validator: validateUsername, trigger: 'blur' }
  ],
//   password: [
//     { required: true, whitespace: true, message: '密码不能为空', trigger: 'blur' },
//     { min: 2, max: 10, message: '密码在2到10之间', trigger: 'blur' }
//   ],
//   phone: [{ validator: validatePohone, trigger: 'blur' }]
})


    const onSubmit = () => {
        // console.log('submit!')
        if(!newcontractdateref.value)return
        newcontractdateref.value.validate(async valid=>{
            if(valid){
                let ret = await userAddApi(newcontractdate)
                if(ret.code===0){
                    successMessage('添加用户成功',()=>{
                        console.log('成功了');
                    });
                }else{
                    errorMessage('添加用户异常，请重新提交',()=>{
                        console.log('异常失败请重试');
                    })
                }
            }else{
                errorMessage('表达验证失败',()=>{
                    console.log('验证失败');
                })
            }
        })


    }
    const onReset = () => {
        if (!newcontractdateref.value && !setnews.value) return
    //这里获取了from表单 调用重置方法
    newcontractdateref.value.resetFields()
    setnews.value.resetFields()
  }

    //新增合同数据
    const  tableData= [
        {

            date: 1,
            plandate: '请选择',
            backmoneymethod: '请选择',
            backmoney: '请选择',
            backmoneybilv: '自动计算',
            egdate: '请选择'
        }
    ]
    
    let control1=ref(true)
    let control2=ref(false)
    //控制v-show的开关
    let setshow1=()=>{

        // console.log('sss',control1.value,control2.value);
       
        control1.value=true
        control2.value=false
        // console.log(setborder1.value);
        setborder1.value.style.borderBottom = '3px solid blue'
        setborder2.value.style.borderBottom = '0px solid blue'
    }
    let setshow2=()=>{
       
        control2.value=true
        control1.value=false
        setborder1.value.style.borderBottom = '0px solid blue'
        setborder2.value.style.borderBottom = '3px solid blue'
        // console.log('sss',control1.value,control2.value);
    }

    const tableDatas = [
  {
    day:1,
    date: '2016-05-03',
    backmoneymethod:'银行卡',
    backmoney: 2000,
    partent:'50%',
    tipday:'第一天'
  },
  {
    day:2,
    date: '2016-05-03',
    backmoneymethod:'银行卡',
    backmoney: 2000,
    partent:'50%',
    tipday:'第二天'
  },
  {
    day:3,
    date: '2016-05-03',
    backmoneymethod:'银行卡',
    backmoney: 2000,
    partent:'50%',
    tipday:'第三天'
  }
]
</script>



<style lang="scss" scoped>

    .el-main {
        --el-main-padding: 0px;


    }

    .news {
        display: flex;
        justify-content: space-between;
    }

    .el-divider--horizontal {
        display: block;
        height: 1px;
        width: 100%;
        margin: 0 0;
        border-top: 1px var(--el-border-color) var(--el-border-style);
    }

    .buttons {
        display: flex;
        justify-content: center;
        margin-top: 5px;
    }


    /* 这里是look弹出层的css */
   .nav{
    padding: 10px;
    border-bottom: 1px solid #a3a2a2;
    span{
        padding: 8px;
        font-weight: 900;
        margin-left: 5px;
    }
   }
   .text{
    position: relative;
    height: 300px;
    .ctnew,.ctmoney{
        position: absolute;
        height: 100%;
        width: 100%;
        
        /* background-color: pink; */
        .spans{
            /* text-align: right; */
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            span{
           width: 320px;
           /* background-color: red; */
           padding: 8px 0;
        }
        }
       
    }
   }
    
  .dian1{
    border-bottom: 3px solid blue;
  }
</style>